<template>
  <view class="uni-pages">
    <!-- 自定义背景色，支持渐变色 -->
    <view class="navigation" :style="{ 'background': bgcolor }">
      <!-- 自适应不同的手机机型，导航顶部留白部分 -->
      <view class="nav--bar-top" :style="{ 'height': menuButton.top + 'px' }"></view>
      <view class="nav-bar-inner">
        <!-- 导航左边部分，是否显示操作胶囊 -->
        <view class="image-box" v-if="control">
          <image src="@/static/logo.png" class="logo" />
        <view v-if="logotextShow">零负担</view>
          <!-- <image class="image" src="@/static/images/icon_back.png" @click="clickBack"></image> -->
          <!-- <image class="image" src="@/static/images/icon_backHome.png" @click="clickHome"></image> -->
        </view>
        <view class="base-box" :style="{ 'height': menuButton.height + 'px', 'width': menuButton.width + 'px' }" v-else>
        </view>
        <!-- 中间文字部分，可设置字体颜色 -->
        <view class="title" :style="'color:' + color + ';'">{{ title }}</view>
        <!-- 右边部分，占据小程序系统胶囊位置 -->
        <view class="base-box" :style="{ 'height': menuButton.height + 'px', 'width': menuButton.width + 'px' }"></view>
      </view>
      <!-- 设置胶囊离内容距离 -->
      <view class="nav-bar-buttom" style="height: 8px;"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    logotextShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    control: {
      type: Boolean,
      default: false,
    },
    bgcolor: {
      type: String,
      default: "",
      // default: "transparent",
      // default: "rgba(0, 0, 0, 0);",
    },
    color: {
      type: String,
      default: "#fff",
    }
  },
  data() {
    return {
      menuButton: {}
    }
  },
  mounted() {
    let menuButton = uni.getMenuButtonBoundingClientRect();
    // uni.getSystemInfo({
    //   success: function(res) {
    //     let navHeight = res.statusBarHeight * (750 / res.windowWidth) + 91;
    //     console.log(navHeight);
    //   }
    // });
    // console.log(menuButton);
    this.menuButton = menuButton;
  },
  methods: {
    clickBack() {
      if (prevLength.value > 2) {
        uni.navigateBack()
      } else {
        uni.switchTab({
          url: uni.getStorageSync("prevPage"),
          success: function () {
            var page = getCurrentPages().pop();
            if (page == undefined || page == null) {
              return
            }
            page.onLoad();
          }
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.uni-pages {
  .navigation {
    .nav-bar-inner {
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 90rpx;

      .image-box {
        display: flex;
        color: #000;

        .logo{
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
          margin-top: 5rpx;

        }
        // .image {
        //   width: 22px;
        //   height: 22px;
        // }
      }

      .title {
        color: #000;
        font-weight: 500;
        font-size: 28rpx;
      }
    }

    .nav-bar-buttom {
      height: 10rpx;
    }
  }
}
</style>
